<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>轨迹回放</title>
	<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
	<style>
		html,
		body,
		#container {
			height: 100%;
			width: 100%;
		}

		.input-card .btn {
			margin-right: 1.2rem;
			width: 9rem;
		}

		.input-card .btn:last-child {
			margin-right: 0;
		}
	</style>
</head>

<body>
	<div id="audioPlay">1111</div>
	<div id="container"></div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript"
		src="https://webapi.amap.com/maps?v=2.0&key=bed6b3d25e1bc2d6bf27a667425ade4c"></script>
	<script>
		$.getJSON('./mapdata.js', function (rs) {

			var geoCoords = rs;
			var pts = []
			for (var i = 0; i < geoCoords.length; i++) {
				var point = [geoCoords[i].geoCoord[0], geoCoords[i].geoCoord[1]];
				pts.push(point)
			}

			// JSAPI2.0 使用覆盖物动画必须先加载动画插件
			AMap.plugin('AMap.MoveAnimation', function () {
				//设置图层
				const layers = [
					new AMap.TileLayer(),
					new AMap.TileLayer.Satellite(),
					// new AMap.TileLayer.RoadNet(),
					// new AMap.TileLayer.Traffic(),
					// new AMap.Buildings()
				]

				let map = new AMap.Map("container", {
					pitch: 60, //地图俯仰角度，有效范围 0 度- 83 度
					viewMode: '3D', //地图模式
					resizeEnable: true,
					expandZoomRange: true,
					center: [113.777103, 34.759248],
					zoom: 18,
					zooms: [10, 19],
					layers: layers,
					title: '郑济高铁'
				});

				let marker = new AMap.Marker({
					map: map,
					position: [113.777103, 34.759248],
					icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
					offset: new AMap.Pixel(-13, -26),
					// height: 10,
				});

				// 绘制轨迹
				let polyline = new AMap.Polyline({
					map: map,
					path: pts,
					showDir: true,
					strokeColor: "#28F",  //线颜色
					strokeOpacity: 0.4,     //线透明度
					strokeWeight: 6,      //线宽
					strokeStyle: "solid"  //线样式
				});

				let passedPolyline = new AMap.Polyline({
					map: map,
					showDir: true,
					strokeOpacity: 1,     //线透明度
					strokeColor: "#AF5",  //线颜色
					strokeWeight: 6,      //线宽
					strokeStyle: "solid"  //线样式
				});

				marker.on('moving', function (e) {
					passedPolyline.setPath(e.passedPath);
					map.setCenter(e.target.getPosition(), true)
					//开始的中心点
					const lng = 113.980742, lat = 35.314622
					if (lat == e.target.getPosition().lat && lng == e.target.getPosition().lng) {
						marker.pauseMove()
						document.getElementById('audioPlay').onclick = function () {
							startPlay()
							setTimeout(() => { marker.resumeMove() }, 2000)
						}
						// 创建并触发一个MouseEvent对象模拟点击事件
						const event = new MouseEvent('click', {
							view: window,
							bubbles: true,
							cancelable: true
						});
						document.getElementById('audioPlay').dispatchEvent(event);
					}
				});

				map.setFitView();

				window.startAnimation = function startAnimation() {
					marker.moveAlong(pts, {
						// 每一段的时长
						// duration: 500,//可根据实际采集时间间隔设置
						//每一段的速度，已废弃
						speed: 50000,
						// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
						autoRotation: true,
					});
				};

				window.pauseAnimation = function () {
					marker.pauseMove();
				};

				window.resumeAnimation = function () {
					marker.resumeMove();
				};

				window.stopAnimation = function () {
					marker.stopMove();
				};

				startAnimation()
			});

		});

	</script>

	<script src="./base64.js"></script>
	<script src="./crypto-js.js"></script>
	<script src="./dist/index.umd.js"></script>
	<script src="./index.js"></script>
</body>

</html>